import React from 'react'
import { Alert, Button, Col, Input, Row, Select, Table } from 'antd'
import './User.less'

const { Option, OptGroup } = Select

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe'
      },
      {
        text: 'Jim',
        value: 'Jim'
      },
      {
        text: 'Submenu',
        value: 'Submenu',
        children: [
          {
            text: 'Green',
            value: 'Green'
          },
          {
            text: 'Black',
            value: 'Black'
          }
        ]
      }
    ], // specify the condition of filtering result
    // here is that finding the name started with `value`
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: 'London',
        value: 'London'
      },
      {
        text: 'New York',
        value: 'New York'
      }
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park'
  }
]

function onChange(pagination, filters, sorter) {
  console.log('params', pagination, filters, sorter)
}

export default class UserView extends React.Component {
  render() {
    return (
      <div className="user-view-row">
        <div>
          <Row gutter={16} className="user-view-row">
            <Col span={1}>工号：</Col>
            <Col span={7}>
              <Input name="user" placeholder="请输入" />
            </Col>
            <Col span={1}>姓名：</Col>
            <Col span={7}>
              <Input placeholder="请输入" />
            </Col>
            <Col span={1}>部门：</Col>
            <Col span={7}>
              <Select defaultValue="lucy" style={{ width: 200 }}>
                <OptGroup label="Manager">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                </OptGroup>
                <OptGroup label="Engineer">
                  <Option value="Yiminghe">yiminghe</Option>
                </OptGroup>
              </Select>
            </Col>
          </Row>
        </div>

        <div>
          <Row gutter={16} className="user-view-row">
            <Col span={1}>状态：</Col>
            <Col span={7}>
              <Select defaultValue="lucy" style={{ width: 200 }}></Select>
            </Col>
            <Col span={1}>修改时间：</Col>
            <Col span={7}>
              <Input placeholder="请输入" />
            </Col>
            <Col span={1} />
            <Col span={7} />
          </Row>
        </div>

        <div>
          <Row gutter={16} justify="end" className="user-view-row">
            <Col span="{8]" />
            <Col span="{8]" />
            <Col span="{8]">
              <Button type="primary">搜索</Button>
              <Button>重置</Button>
            </Col>
          </Row>
        </div>

        <div className="user-view-row">
          <Button type="primary">添加用户</Button>
        </div>

        <div className="user-view-row">
          <Alert message="已选择 2 项" type="info" showIcon />
        </div>

        <div className="user-view-row">
          <Table columns={columns} dataSource={data} onChange={onChange} />
        </div>
      </div>
    )
  }
}
